<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>color 9</title>
    <link rel="stylesheet" href="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.min.css">
</head>

<body>
    <button type="button" id="test" style="margin-bottom:15px;">隐藏色块</button>
    <script src="https://www.unpkg.com/ew-color-picker/dist/ew-color-picker.js"></script>
    <script>
        // colorConfig不是响应式对象
        const colorConfig = Object.create(null);
        const color = new ewColorPicker(colorConfig);
        // 从实例上读取的config对象是一个响应式对象，因此增加了alpha属性，则颜色选择器会触发颜色选择器的重新渲染
        ewColorPicker.util.$('#test').onclick = function(){
            this.textContent = this.textContent.indexOf('隐藏') > -1 ? '显示色块' : '隐藏色块';
            color.config.hasBox = !color.config.hasBox;
        }
    </script>
</body>

</html>